<!--
 * @Author: 梁青春
 * @Date: 2025-11-03 10:50:39
 * @LastEditTime: 2025-11-07 15:53:47
 * @LastEditors: 梁青春
 * @Description: 病区管理页面
-->
<template>
   <navbar />
  <div class="main-container ward-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">{{ $route.meta.title }}</h2>
      </div>
      <div class="header-right">
        <el-button
          v-hasPermi="['baseinfo:ward:add']"
          type="primary"
          icon="Plus"
          @click="handleAddWard"
          class="add-btn op-btn"
        >
          新增病区
        </el-button>
      </div>
    </div>

    <!-- 病区信息表格 -->
    <div class="table-container">
      <el-table
        :data="wardList"
        stripe
        border
        style="width: 100%"
        v-loading="loading"
        empty-text="暂无病区数据"
        class="ward-table"
      >
        <!-- 中文注释：病区名称列改为可点击，跳转到编辑页并携带 wardId 参数 -->
        <el-table-column prop="wardName" label="病区名称" min-width="120" align="center">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" @click="handleEditWard(row)">
              {{ row.wardName }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="wardLocation" label="病区位置" min-width="150" align="center" />
        <el-table-column prop="deptNames" label="关联科室" min-width="200" align="center" />
        <el-table-column prop="userCount" label="成员数" width="100" align="center" />
        <el-table-column prop="roomCount" label="病房数" width="100" align="center" />
        <el-table-column prop="bedCount" label="病床数" width="100" align="center" />
        <el-table-column width="60" align="center" fixed="right">
          <template #default="scope">
            <el-button type="text" icon="CloseBold" @click="handleDelete(scope.row)" class="delete-btn"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="queryParams-container">
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @query-params="getList"
      />
    </div>
  </div>
</template>

<script setup name="WardManagement">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { getWardList, deleteWard } from '@/api/baseinfo/ward'

const proxy = getCurrentInstance().proxy
const router = useRouter()
// 响应式数据
const loading = ref(false)

// 病区列表数据
const wardList = ref([])
const total = ref(0)
// 分页数据
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})

// 方法定义
const loadWardList = async () => {
  try {
    loading.value = true

    const response = await getWardList({
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize
    })

    if (response.code === 200) {
      wardList.value = response.data
      total.value = response.total
    } else {
      proxy.$modal.notifyWarning(response.message || '获取病区列表失败')
    }
  } catch (error) {
    console.error('获取病区列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleDelete = async row => {
  try {
    await proxy.$modal.confirm(`确定要删除病区"${row.wardName}"吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const response = await deleteWard(row.wardId)

    if (response.code === 200) {
      proxy.$modal.notifySuccess(response.message || '删除成功')
      await loadWardList() // 重新加载列表
    } else {
      proxy.$modal.notifyWarning(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
    }
  }
}

// 新增病区处理方法
const handleAddWard = () => {
  router.push('/baseinfo/wardManagement/info')
}

// 编辑病区处理方法：点击名称跳转到编辑页
const handleEditWard = row => {
  // 中文注释：兼容不同数据结构，优先使用 row.id，其次 row.wardId
  const id = row?.id ?? row?.wardId
  if (!id) {
    proxy.$modal.notifyWarning('无法获取病区ID，无法进入编辑页')
    return
  }
  // 中文注释：通过路由 query 传递 wardId 到新增页面，用于数据回显
  router.push({ path: '/baseinfo/wardManagement/info', query: { wardId: String(id) } })
}

// 获取列表数据的方法别名，用于分页组件
const getList = () => {
  loadWardList()
}

// 组件挂载时加载数据
onMounted(() => {
  loadWardList()
})
</script>
